<template>
    <section class="bk-layout-custom-component-wrapper container-efdlbdag">
        <bk-swiper
            :is-loop="true"
            :loop-time="8000"
            :pics="swiperA5e59pics"
            class="bk-layout-component-efdlbdag swiperA5e59">
        </bk-swiper>
        <bk-sideslider
            :is-show.sync="isShowEdit"
            title="新增帖子"
            :quick-close="true"
            :show-mask="true"
            :width="600"
            direction="right"
            class="bk-layout-component-efdlbdag sideslider327e7">
            <template slot="content">
                <div class="bk-layout-component-efdlbdag block75b22">
                    <div class="bk-layout-component-efdlbdag" style="">
                        <bk-form
                            :model="formE17a0model"
                            :rules="formE17a0rules"
                            ref="form"
                            form-type="horizontal"
                            :label-width="150">
                            <bk-form-item
                                property="title"
                                label="标题"
                                :label-width="150"
                                error-display-type="normal"
                                :required="false"
                                :icon-offset="8"
                                :auto-check="false"
                                class="bk-layout-component-efdlbdag">
                                <bk-input
                                    type="text"
                                    font-size="normal"
                                    :disabled="false"
                                    :readonly="false"
                                    :clearable="true"
                                    :show-controls="true"
                                    class="bk-layout-component-efdlbdag input399bf"
                                    v-model="formE17a0model.title">
                                </bk-input>
                            </bk-form-item>
                            <bk-form-item
                                property="content"
                                label="内容"
                                :label-width="150"
                                error-display-type="normal"
                                :required="false"
                                :icon-offset="8"
                                :auto-check="false"
                                class="bk-layout-component-efdlbdag">
                                <bk-input
                                    type="textarea"
                                    font-size="normal"
                                    :disabled="false"
                                    :readonly="false"
                                    :clearable="true"
                                    :show-controls="true"
                                    class="bk-layout-component-efdlbdag input79ada"
                                    v-model="formE17a0model.content">
                                </bk-input>
                            </bk-form-item>
                            <bk-form-item
                                property=""
                                label=""
                                :label-width="150"
                                error-display-type="normal"
                                :required="false"
                                :icon-offset="8"
                                :auto-check="false"
                                class="bk-layout-component-efdlbdag">
                                <bk-button
                                    title="hello world"
                                    size="normal"
                                    theme="primary"
                                    :disabled="false"
                                    :loading="false"
                                    class="bk-layout-component-efdlbdag button0a344"
                                    @click="addBBSData">
                                    提交
                                </bk-button>
                                <bk-button
                                    title="hello world"
                                    size="normal"
                                    theme="default"
                                    :disabled="false"
                                    :loading="false"
                                    class="bk-layout-component-efdlbdag buttonD9e87">
                                    取消
                                </bk-button>
                            </bk-form-item>
                        </bk-form>
                    </div>
                </div>
            </template>
        </bk-sideslider>

        <div class="bk-layout-row-efdlbdag grid-848b0">
            <div class="bk-layout-col-efdlbdag column-8e07b">
                <bk-button
                    title="hello world"
                    size="normal"
                    theme="primary"
                    :disabled="false"
                    :loading="false"
                    class="bk-layout-component-efdlbdag button04200"
                    @click="changeIsShowEdit">
                    新增帖子
                </bk-button>

                <div
                    class="bk-free-layout-efdlbdag free-layout-b9e99"
                    v-for="(freeLayoutB9e99Item, freeLayoutB9e99Index) in bbsList"
                    :key="freeLayoutB9e99Index">
                    <div style="position: absolute; top: 0px; left: 34px;">
                        <bk-link
                            theme="primary"
                            href=""
                            :disable="false"
                            :underline="false"
                            icon=""
                            icon-placement="left"
                            class="bk-layout-component-efdlbdag linkA7227"
                            @click="(...args) => goToDetail(freeLayoutB9e99Item.id, ...args)">
                            {{freeLayoutB9e99Item.title}}
                        </bk-link>
                    </div>
                    <div style="position: absolute; top: 29px; left: 34px;">
                        <span title="" class="bk-layout-component-efdlbdag textBebd1">
                            {{ freeLayoutB9e99Item.createUser }}</span>
                    </div>
                    <div style="position: absolute; top: 29px; left: 314px;">
                        <span title="" class="bk-layout-component-efdlbdag text6d0b0">
                            {{freeLayoutB9e99Item.createTime}}</span>
                    </div>
                    <div style="position: absolute; top: 34px; left: 573px;">
                        <bk-icon type="password" size="14px" class="bk-layout-component-efdlbdag bkIconF327a"></bk-icon>
                    </div>
                    <div style="position: absolute; top: 29px; left: 598px;">
                        <bk-animate-number
                            :value="0"
                            :digits="0"
                            class="bk-layout-component-efdlbdag animateNumber12a1b"></bk-animate-number>
                    </div>
                </div>
            </div>
            <div class="bk-layout-col-efdlbdag column-d9388">
                <!-- eslint-disable -->
                <!-- prettier-ignore -->
                <p title=""   class='bk-layout-component-efdlbdag paragraphE19fc'>君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
                <!-- eslint-enable -->
            </div>
        </div>
    </section>
</template>
<script>
    /**
     * 请先安装 bk-magic-vue 组件库、bkui-vue-complex 复合组件库
     * bk-magic-vue 组件库: https://magicbox.bk.tencent.com/static_api/v3/components_vue/2.0/example/index.html#/install
     * bkui-vue-complex 复合组件库: https://github.com/TencentBlueKing/lesscode-comp
     *
     * 如果页面使用了远程函数，单独使用本页面，需要确保项目 store 下有相应的方法，后端有相应的转发接口
     */

    import methodsMixin from '@/mixins/methods-mixin'
    export default {
        mixins: [methodsMixin],
        data () {
            function getInitVariableValue (defaultValue, defaultValueType) {
                let val = defaultValue.all
                if (defaultValueType === 1) val = defaultValue[window.BKPAAS_ENVIRONMENT]
                return val
            }
            return {
                swiperA5e59pics: [
                    {
                        url:
                            'https://magicbox.bk.tencent.com/static_api/v3/components_vue/2.0/example/example/static/images/firstswiper.jpg'
                    },
                    {
                        url:
                            'https://magicbox.bk.tencent.com/static_api/v3/components_vue/2.0/example/example/static/images/secondswiper.jpg'
                    }
                ],
                formE17a0model: { title: '', content: '' },
                formE17a0rules: { content: [], title: [] },
                isShowEdit: getInitVariableValue({ all: false, prod: false, stag: false }, 0),
                bbsList: getInitVariableValue(
                    { all: ['Jack', 'Lucy', 'Lily'], prod: ['Jack', 'Lucy', 'Lily'], stag: ['Jack', 'Lucy', 'Lily'] },
                    0
                )
            }
        },

        created () {
            this.getBBSDataList('', '')
            this.getCommentDataList()
        }
    }
</script>
<style lang="css" scoped>
    .container-efdlbdag {
        padding-left: 200px;
        padding-right: 200px;
        padding-top: 20px;
        padding-bottom: 0px;
        height: 100%;
    }
    .bk-layout-row-efdlbdag {
        display: flex;
    }
    .bk-layout-row-efdlbdag:after {
        display: block;
        clear: both;
        content: '';
        font-size: 0;
        height: 0;
        visibility: hidden;
    }
    .bk-layout-col-efdlbdag {
        float: left;
        position: relative;
        min-height: 1px;
    }
    .bk-free-layout-efdlbdag {
        height: 500px;
        width: 100%;
        display: inline-block;
        position: relative;
    }
    .bk-free-layout-item-inner-efdlbdag {
        height: 100%;
        position: relative;
    }
    .bk-form-radio {
        margin-right: 20px;
    }
    .bk-form-checkbox {
        margin-right: 20px;
    }
    .echarts {
        width: 100%;
        height: 100%;
    }
    /* 设置 bk-exception 组件宽度为 100% */
    .bk-exception-img {
        width: 100%;
    }
    .bk-form-item {
        margin: 10px;
    }
    .bk-sideslider {
        margin: 0;
    }
    /* 设置 .bk-form-control 组件宽度为 auto */
    .bk-form-control {
        width: auto;
    }
    .bk-form-control .bk-input-text {
        font-size: 12px;
    }
    [align-horizontal-left] > *,
    [align-horizontal-center] > *,
    [align-horizontal-right] > *,
    [align-horizontal-space-between] > *,
    [align-vertical-top] > *,
    [align-vertical-center] > *,
    [align-vertical-bottom] > * {
        flex-shrink: 0;
    }
    [align-horizontal-left],
    [align-horizontal-center],
    [align-horizontal-right],
    [align-horizontal-space-between] {
        display: flex !important;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    [align-horizontal-left] {
        justify-content: flex-start;
    }
    [align-horizontal-center] {
        justify-content: center;
    }
    [align-horizontal-right] {
        justify-content: flex-end;
    }
    [align-horizontal-space-between] {
        justify-content: space-between;
    }
    [align-vertical-top],
    [align-vertical-center],
    [align-vertical-bottom] {
        display: flex !important;
        flex-wrap: wrap;
    }
    [align-vertical-top] {
        align-items: flex-start;
    }
    [align-vertical-center] {
        align-items: center;
    }
    [align-vertical-bottom] {
        align-items: flex-end;
    }
    [absolute-align-horizontal-left] {
        left: 0 !important;
    }
    [absolute-align-horizontal-center] {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    [absolute-align-horizontal-right] {
        left: unset !important;
        right: 0 !important;
    }
    [absolute-align-vertical-top] {
        top: 0 !important;
    }
    [absolute-align-vertical-center] {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    [absolute-align-vertical-bottom] {
        top: unset !important;
        bottom: 0 !important;
    }
    [absolute-align-horizontal-center][absolute-align-vertical-center] {
        transform: translate(-50%, -50%) !important;
    }

    .bk-layout-component-efdlbdag.swiperA5e59 {
        width: 100%;
        height: 300px;
        margin-left: 0;
    }
    .bk-layout-component-efdlbdag.sideslider327e7 {
        display: inline-block;
    }
    .bk-layout-component-efdlbdag.block75b22 {
        display: block;
        width: 600%;
    }
    .bk-layout-component-efdlbdag.input399bf {
        display: inline-block;
        vertical-align: middle;
        width: 300px;
    }
    .bk-layout-component-efdlbdag.input79ada {
        display: inline-block;
        vertical-align: middle;
        width: 300px;
    }
    .bk-layout-component-efdlbdag.button0a344 {
        display: inline-block;
        vertical-align: middle;
        width: 88px;
    }
    .bk-layout-component-efdlbdag.buttonD9e87 {
        display: inline-block;
        vertical-align: middle;
        width: 88px;
        margin-left: 8px;
    }
    .grid-848b0 {
        margin-top: 14px;
        height: 325px;
    }
    .column-8e07b {
        width: 75%;
        padding-right: 20px;
    }
    .bk-layout-component-efdlbdag.button04200 {
        display: inline-block;
        vertical-align: middle;
        margin-top: 8px;
        margin-left: 2px;
        width: 105px;
    }
    .free-layout-b9e99 {
        height: 70px;
        margin-top: 23px;
        margin-left: 0;
        width: 100%;
        border-bottom: 1px solid rgb(221, 228, 235);
    }
    .bk-layout-component-efdlbdag.linkA7227 {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
    }
    .bk-layout-component-efdlbdag.textBebd1 {
        display: inline-block;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
    }
    .bk-layout-component-efdlbdag.text6d0b0 {
        display: inline-block;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
    }
    .bk-layout-component-efdlbdag.bkIconF327a {
        display: inline-block;
        font-size: 14px;
        vertical-align: middle;
    }
    .bk-layout-component-efdlbdag.animateNumber12a1b {
        display: inline-block;
        vertical-align: middle;
    }
    .column-d9388 {
        width: 25%;
        margin-left: 3px;
    }
    .bk-layout-component-efdlbdag.paragraphE19fc {
        display: inline-block;
        width: 199px;
        text-align: left;
        font-size: 14px;
        white-space: pre-wrap;
        word-break: break-all;
        margin-left: 0px;
    }
</style>
